<template>
    <div class="invite mb-10">
        <!-- <div class="i-tip c-title-4 py-5 px-10" style="font-weight: 600;">本月邀请榜单</div> -->
        <div class="i-tip c-title-4 py-5 px-10 ybdr-b" style="font-weight: 600">{{ $t("message.Rank_.a") }}</div>
        <!-- <JTable :table-data="rowsData" :table-config="rowConfig">
            <template v-slot:header="{ column, index }">
                {{ column }}
            </template>
            <template v-slot:row="{ row, rowIndex, cell, cellIndex }">
                {{ cell }}
            </template>
        </JTable> -->

        <JTable2 :table-data="filterList" :table-config="subConfig3" style="background-color: var(--card)">
            <template v-slot:column-0="{ rowIndex }">
                <span>{{ rowIndex + 1 }}</span>
            </template>
            <template v-slot:column-3="{ row, column }">
                <JEnergy :num="row.inviteRewardEnergy"></JEnergy>
            </template>
            <template v-slot:column-4="{ row, column }">
                <span>{{ formatTimestamp(row.regTime) }}</span>
            </template>
        </JTable2>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import JTable2 from "@/components/j-table3/index.vue";
import { useUser } from "@/stores/user";
import { formatTimestamp } from "@/comm/format";
import JEnergy from "@/components/j-energy/index.vue"
import i18n from "@/locals";

const user = useUser();

// const rowsData = ref([
//     ["1", "332461", 6000],
//     ["2", "345367gg", 500]
// ]);

// const rowConfig = ref({
//     columns: ["排名", "邀请人ID", "奖励"],
//     flex: [1, 1, 1],
//     headerColor: "lightblue",
//     rowColors: ["lightgreen", "lightyellow"]
// });

const filterList = computed(() => {
    return user.inviteRank;
});

// const subConfig3 = ref([
//     { label: '#', prop: 'id', flex: 0.5 },
//     { label: 'id', prop: 'id', flex: 1 },
//     // { label: '邮箱', prop: 'email', flex: 1 },
//     { label: '邀请人数', prop: 'inviteNum', flex: 1 },
//     { label: '邀请奖励', prop: 'inviteRewardEnergy', flex: 1 },
//     { label: '注册时间', prop: 'regTime', flex: 1 },
// ]);

const subConfig3 = ref([
    { label: i18n.global.t("message.Rank_.table.a"), prop: "id", flex: 0.5 },
    { label: i18n.global.t("message.Rank_.table.b"), prop: "id", flex: 1 },
    { label: i18n.global.t("message.Rank_.table.c"), prop: "inviteNum", flex: 1 },
    { label: i18n.global.t("message.Rank_.table.d"), prop: "inviteRewardEnergy", flex: 1 },
    { label: i18n.global.t("message.Rank_.table.e"), prop: "regTime", flex: 1 }
]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
